<% include ../header.ejs %>


<link rel="stylesheet" href="/stylesheets/app/address/address.css">

<header data-am-widget="header" data-am-sticky class="am-header am-header-default" id="appTemplates-Nav">

    <div class="am-header-left am-header-nav">
        <a href='index' class="">
            <img class="am-header-icon-custom" src="data:image/svg+xml;charset&#x3D;utf-8,&lt;svg xmlns&#x3D;&quot;http://www.w3.org/2000/svg&quot; viewBox&#x3D;&quot;0 0 12 20&quot;&gt;&lt;path d&#x3D;&quot;M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z&quot; fill&#x3D;&quot;%23fff&quot;/&gt;&lt;/svg&gt;" alt=""/>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="" id="Typeface-whitecolor">成员</a>
    </h1>


    <div class="am-header-right am-header-nav">
        <a id="custom-edit-button" onClick="actionClick('<%=action%>')">
            <span class="am-header-nav-title" id="txtHeadButton">
                <%if(action=='add'){%>
                    保存
                <%}else if(action=='detail'){%>
                    编辑
                <%}%>
              </span>
        </a>
    </div>


</header>



<form action="" class="am-form">
    <fieldset disabled id="formFS">

        <div class="am-form-group">
            <label for="doc-vld-wechat">微信号（必填）：</label>
            <input type="text"  id="doc-vld-wechat" placeholder="微信号" required />
        </div>

        <div class="am-form-group">
            <label for="doc-vld-name">姓名(必填)：</label>
            <input type="text" id="doc-vld-name" minlength="3" placeholder="输入用户名"  required/>
        </div>
        <div class="am-form-group">
            <label for="doc-vld-mobile">手机号（必填）：</label>
            <input type="number" id="doc-vld-mobile" placeholder="输入手机号" required/>
        </div>


        <div class="am-form-group">
            <label for="doc-vld-tel">座机号：</label>
            <input type="number" id="doc-vld-tel" placeholder="输入座机号" required/>
        </div>

        <div class="am-form-group">
            <label for="doc-vld-position">职位：</label>
            <input type="text" id="doc-vld-position" placeholder="输入职位" >
        </div>
        <div id="divAction" style="display:none">
        <button class="am-btn am-btn-danger" type="button" id="btndel" onclick="delUser()">删除</button>
        <button class="am-btn am-btn-secondary" type="button" id="btnSave" onclick="editUser()">保存</button>
        </div>
    </fieldset>
</form>



<div class="am-modal am-modal-prompt" tabindex="-1" id="alert-prompt">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">提示</div>
        <div class="am-modal-bd">
            <label id="lbMsg"></label>
        </div>
        <div class="am-modal-footer">

            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>


<script>

    <%if(action=='detail' &&typeof user != 'undefined'){%>

    $('#doc-vld-wechat').val('<%=user.weid%>');
    $('#doc-vld-name').val('<%=user.name%>');
    $('#doc-vld-mobile').val('<%=user.phone%>');
    $('#doc-vld-tel').val('<%=user.tel%>');
    $('#doc-vld-position').val('<%=user.des%>');
    var rowId='<%=user.rowId%>';
    //初始操作按钮不可见
    var isEdit=false;


    <%}else{%>
    var isEdit=true;
    $('#formFS').attr("disabled",false);
   <%}%>

    var oldwechat=$('#doc-vld-wechat').val();
    var oldusrName= $('#doc-vld-name').val();
    var oldphone=$('#doc-vld-mobile').val();
    var oldtel=$('#doc-vld-tel').val();
    var oldposition=$('#doc-vld-position').val();

    function getvalue(){
         oldwechat=$('#doc-vld-wechat').val();
         oldusrName= $('#doc-vld-name').val();
         oldphone=$('#doc-vld-mobile').val();
         oldtel=$('#doc-vld-tel').val();
         oldposition=$('#doc-vld-position').val();
    }
    function reset(){
        $('#doc-vld-wechat').val(oldwechat);
        $('#doc-vld-name').val(oldusrName);
        $('#doc-vld-mobile').val(oldphone);
        $('#doc-vld-tel').val(oldtel);
        $('#doc-vld-position').val(oldposition);
    }

    function showMsgNoRefresh(msg){
        $('#lbMsg').text(msg);

        $('#alert-prompt').modal({
            relatedElement: this,
            onConfirm: function (e) {


                return false;
            },
            onCancel: function () {


            }
        });


    }

    function showMsg(msg){

        $('#lbMsg').text(msg);

        $('#alert-prompt').modal({
            relatedElement: this,
            onConfirm: function (e) {

            self.location="index"
                return false;
            },
            onCancel: function () {


            }
        });
    }





    function actionClick(action) {
//        alert(action);
        if(action=='add'){

            addUser();
        }else if(action='edit'){

            if(isEdit){
                isEdit=false;
                $("#txtHeadButton").text("编辑");
                //hideButton
                showButton(false);
                reset();
                $('#formFS').attr("disabled",true);
            }
            else{
                isEdit=true;
                $("#txtHeadButton").text("取消");
                //showButton
                showButton(true);
                $('#formFS').attr("disabled",false);
            }
        }
    }

    function showButton(isVisible){
        $('#divAction').toggle(200);
    }

    function isChanged(){


    }
    function editUser(){
        //判断内容是否改动
        var wechat=$('#doc-vld-wechat').val();
        var usrName= $('#doc-vld-name').val();
        var phone=$('#doc-vld-mobile').val();
        var tel=$('#doc-vld-tel').val();
        var position=$('#doc-vld-position').val();




        if(wechat==oldwechat&&usrName==oldusrName&&phone==oldphone&&tel==oldtel&&position==oldposition){
            showMsgNoRefresh("未修改任何项");
            return;
        }
        var saveData={'name':usrName,'phone':phone,'tel':tel,'wechat':wechat,'des':position,'rowId':rowId};
        var options = {
            url: 'editUser',
            type: 'post',
            dataType: 'json',
            data: saveData,
            error: function (request) {
                showMsgNoRefresh("修改失败");
            },
            success: function (data) {
//                       alert(data.isCreated);

                if (data.isCreated && data.isCreated == 1) {


                    showMsgNoRefresh("修改成功");
                    getvalue();
                    actionClick('edit');

                } else {
                    showMsgNoRefresh("修改失败");
                }
            }
        };
        $.ajax(options);
        return false;
    }
    //删除用户
    function delUser(){

        var delData={'rowId':rowId};
        var options = {
            url: 'delUser',
            type: 'post',
            dataType: 'json',
            data: delData,
            error: function (request) {
                showMsgNoRefresh("删除失败");
            },
            success: function (data) {
//                       alert(data.isCreated);

                if (data.isDel && data.isDel == 1) {


                    showMsg("删除成功");

                } else {
                    showMsgNoRefresh("删除失败");
                }
            }
        };
        $.ajax(options);
        return false;
    }

    function addUser(){
        var wechat=$('#doc-vld-wechat').val();
        var usrName= $('#doc-vld-name').val();
        var phone=$('#doc-vld-mobile').val();
        var tel=$('#doc-vld-tel').val();
        var position=$('#doc-vld-position').val();

        var saveData={'name':usrName,'phone':phone,'tel':tel,'wechat':wechat,'des':position};

        var options = {
            url: 'addUser',
            type: 'post',
            dataType: 'json',
            data: saveData,
            error: function (request) {
                showMsgNoRefresh("添加失败");
            },
            success: function (data) {
//                       alert(data.isCreated);

                if (data.isCreated && data.isCreated == 1) {


                    showMsg("添加成功");

                } else {
                    showMsgNoRefresh("添加失败");
                }
            }
        };
        $.ajax(options);
        return false;
    }

</script>

<% include ../footer.ejs %>